<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
            <el-form-item label="活动编码">
              <br> <br>
                <el-input style="margin-left:-70px;width:200px" v-model="formInline.activityCode" placeholder></el-input>
            </el-form-item>
            <el-form-item label="发布状态">
              <br> <br>
                <el-select v-model="formInline.publishStatus" style="margin-left:-70px;width:200px">
                    <el-option label="全部" value></el-option>
                    <el-option label="已发布" value="1"></el-option>
                    <el-option label="未发布" value="0"></el-option>
                </el-select>
            </el-form-item>
            
            <el-form-item label="活动名称">
              <br> <br>
                <el-input style="margin-left:-70px;width:200px" v-model="formInline.activityName" placeholder></el-input>
            </el-form-item>
            <el-form-item label="开展状态">
              <br> <br>
                <el-select v-model="formInline.runStatus" style="margin-left:-70px;width:200px">
                    <el-option label="全部" value></el-option>
                    <el-option label="未开始" value="1"></el-option>
                    <el-option label="进行中" value="2"></el-option>
                    <el-option label="已结束" value="3"></el-option>
                </el-select>
            </el-form-item>
            <br/>
            <el-form-item label="　有效期">
              <br> <br>
                <el-date-picker
                    v-model="formInline.runTimeRange"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    @focus="focusPickerDate2"
                     style="margin-left:-70px;width:400px"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="创建时间">
              <br> <br>
                <el-date-picker
                    v-model="formInline.createTimeRange"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    :picker-options="pickerOptions"
                    @focus="focusPickerDate"
                     style="margin-left:-70px;width:410px"
                ></el-date-picker>
            </el-form-item>
            <div style="width:100%;display:flex;justify-content:flex-end;">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toAdd()" icon="el-icon-edit" size="mini">创建活动</el-button>
            </el-form-item>
            </div>
            
        </el-form>

        <el-table
            :data="tableData"
            v-loading="loading"
            border
               height="400px"
            style="width: 100%;"
            :header-cell-style="{background:'#ebecf0',color:'#606266'}"
        >
            <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
            <el-table-column
                prop="activityCode"
                label="活动编码"
                align="center"
                width="150"
                show-overflow-tooltip
               
            ></el-table-column>
            <el-table-column
                prop="activityName"
                label="活动名称"
                header-align="center"
                width="200"
                show-overflow-tooltip
             
            ></el-table-column>
            <el-table-column
                prop="activityDesc"
                label="活动描述"
                header-align="center"
                align="left"
                width="250"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="发布状态" align="center" width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.publishStatus == '0'">未发布</span>
                    <span v-if="scope.row.publishStatus == '1'">已发布</span>
                </template>
            </el-table-column>
            <el-table-column label="开展状态" align="center" width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == 1">未开始</span>
                    <span v-if="scope.row.type == 2">进行中</span>
                    <span v-if="scope.row.type == 3">已结束</span>
                </template>
            </el-table-column>
            <el-table-column label="有效期" align="center" width="250" :formatter="dateRange"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center" width="150"></el-table-column>
            <el-table-column prop="createUserName" label="创建人" align="center" width="120"></el-table-column>
            <el-table-column
                label="操作"
                width="200"
                align="center"
                header-align="center"
                fixed="right"
            >
                <template slot-scope="scope">
                    <div style="width:120px;text-align:left;margin:0 auto">
                        <el-button
                            type="text"
                            @click="toDetail(scope.row)"
                            v-if="scope.row.publishStatus == 1"
                        >详情</el-button>
                        <el-button
                            type="text"
                            @click="toEdit(scope.row)"
                            v-if="scope.row.publishStatus == 0"
                        >编辑</el-button>
                        <el-button
                            type="text"
                            @click="updateGoodsActivityStatus(scope.row.uuid, '1')"
                            v-if="scope.row.publishStatus == 0"
                        >发布</el-button>
                        <el-button
                            type="text"
                            @click="updateGoodsActivityStatus(scope.row.uuid, '0')"
                            v-if="scope.row.publishStatus == 1"
                        >撤回</el-button>
                        <el-button
                            type="text"
                            @click="deleteGoodsActivity(scope.row.uuid)"
                            v-if="scope.row.status == '0'"
                        >删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="block" style="margin-top:5px;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
                :current-page="listQuery.current"
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import {
  queryGoodsActivityList,
  updateGoodsActivityStatus,
  deleteGoodsActivity
} from "@/api/shareActivity";

const curDateStr = function (){
  var curDate = new Date();
  var year = curDate.getFullYear();
  var month = curDate.getMonth() + 1;
  month = month > 9 ? month : "0" + month;
  var date = curDate.getDate();
  date = date > 9 ? date : "0" + date;
  return year + "-" + month + "-" + date;
}

export default {
  data() {
    return {
      loading: true,
      uuid: "",
      formInline: {
        activityCode: "",
        activityName: "",
        publishStatus: "",
        runStatus: "",
        runTimeRange: ['',''],
        createTimeRange: ['','']
      },
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      },
      tableData: [],//活动列表
      pickerOptions: {
        shortcuts: [
          {
            text: "最近3天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      
    };
  },
  mounted() {
    this.queryGoodsActivityList();
  },
  methods: {
    //活动列表
      changeIsLimitQuantity(row, index, prow, pindex){
      if(row.isLimitQuantity == 0){//不限
        this.goodsList[pindex].giftList[index].giftQuantity = null;
      }else if(row.giftQuantity === null || row.giftQuantity === undefined || row.giftQuantity === ""){
          this.goodsList[pindex].giftList[index].giftQuantity = 1;
      }
    },
    queryGoodsActivityList() {
      if(this.formInline.createTimeRange == null || this.formInline.createTimeRange == 0){
        this.formInline.createTimeRange = ['',''];
      }
      if(this.formInline.runTimeRange == null || this.formInline.runTimeRange == 0){
        this.formInline.runTimeRange = ['',''];
      }
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          activityCode: this.formInline.activityCode.trim(),
          activityName: this.formInline.activityName.trim(),
          publishStatus: this.formInline.publishStatus,
          beginCreateTime: this.formInline.createTimeRange[0] == "" ? null : this.formInline.createTimeRange[0],
          endCreateTime: this.formInline.createTimeRange[1] == "" ? null : this.formInline.createTimeRange[1],
          type: this.formInline.runStatus,
          beginDate: this.formInline.runTimeRange[0] == "" ? null : this.formInline.runTimeRange[0],
          endDate: this.formInline.runTimeRange[1] == "" ? null : this.formInline.runTimeRange[1]
        },
        ascs: [],
        descs: []
      };
      queryGoodsActivityList(data).then(res => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    fixData(row, column, cellValue, index) {
      if (cellValue == null || cellValue == "") return "";
      return cellValue.substring(0, 10);
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.queryGoodsActivityList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.queryGoodsActivityList();
    },
    //查询
    search() {
      this.listQuery.current = 1;
      this.queryGoodsActivityList();
    },
    //清空
    kong() {
      this.formInline.activityCode = "";
      this.formInline.activityName = "",
      this.formInline.publishStatus = "";
      this.formInline.runStatus = "";
      this.formInline.runTimeRange = ['',''];
      this.formInline.createTimeRange = ['',''];
    },
    //添加活动
    toAdd() {
      this.$router.push({
        name: "shareActivityDetail",
        params: {}
      });
    },
    //查看活动
    toDetail(item) {
      this.$router.push({
        name: "shareActivityDetail",
        params: {
          edit: item,
          disabledFlag: true,
            disabledFlagone: true
        }
      });
    },
    //编辑活动
    toEdit(item) {
      this.$router.push({
        name: "shareActivityDetail",
        params: {
          edit: item,
          disabledFlag: false,
          disabledFlagone: false
        }
      });
    },
    updateGoodsActivityStatus(uuid, status) {
      var msg = "";
      if (status == "1") {
        msg = "发布";
      } else if (status == "0") {
        msg = "撤回";
      }
      this.$confirm("确定" + msg + "当前活动吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            uuid: uuid,
            status: status
          };
          updateGoodsActivityStatus(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: msg + "成功",
                type: "success"
              });
              this.queryGoodsActivityList();
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: "error"
              });
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },
    deleteGoodsActivity(uuid, status) {
      this.$confirm("确定删除当前活动吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            uuid: uuid,
            status: status
          };
          deleteGoodsActivity(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: "删除成功",
                type: "success"
              });
              this.queryGoodsActivityList();
            } else {
              this.$message.error("删除失败");
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },
    //点击空白日期初始化
    focusPickerDate(){
      this.formInline.createTimeRange = [curDateStr(), curDateStr()];
    },
    focusPickerDate2(){
      this.formInline.runTimeRange = [curDateStr(), curDateStr()];
    },
    //数字格式化
    dateRange(row, column, cellValue, index) {
      if (row.beginDate != null && row.beginDate.toString().length >= 10) {
        return row.beginDate.toString().substr(0,10) + " — " + row.endDate.toString().substr(0,10)
      } else {
        return "—";
      }
    },
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = true; // C 跳转到 A 时让 A 不缓存，即刷新
    next();
  },
  
};
</script>
<style lang="less" scoped>
</style>
